/* eslint-disable react-hooks/exhaustive-deps */
/*
  学习目标：表单的相关API
  步骤：
     1. onFinish====》表单的事件，有一个回调函数，回调函数的第一个参数，是一个对象，保存着表单手机的对象集合===》表单项需要使用name属性绑定相关的值，得到的是，对象的键名
     2. label：表单的名称
     3. initialValue={0}===》表单的初始值
*/

import { Breadcrumb, Button, Card, Form, Input, Radio, Space, message, Upload, Modal } from 'antd';
import Channel from 'components/Channel';
import React, { useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
// 富文本编辑器
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// 引入样式
import styles from './index.module.scss';
// 上传文件的引入
import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';
import { pubishArticleAPI } from 'api/articlePublish';
import { getArticleByIdAPI, editArticleByIdAPI } from 'api/articleList';
import { useHistory } from 'react-router-dom';
import { useParams } from 'react-router-dom';
// import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
const whiteListUrl = ['image/jpg', 'image/png', 'image/jpeg'];
// 引入end
export default function ArticlePublish() {
  // 创建表单的REF绑定表单，获取表单实例
  const refForm = useRef();
  // 路由id的获取start
  const rouerId = useRef(useParams().id || '');
  const id = rouerId.current;
  console.log(' 路由传递过来的数据 ----->  ', id);
  // 路由id的获取end
  // 根据传递过来的id获取用户详情数据
  const loadDataById = async id => {
    const res = await getArticleByIdAPI(id);
    // 表单实例的方法在创建ref实例的current身上
    // console.log('鸟朦胧  ----->  ', res, refForm);
    refForm.current.setFieldsValue({ ...res.data, type: res.data.cover.type });
    // 还需要将type回填到状态中
    setType(res.data.cover.type);
    // 回填filelist的问题
    setFilelist(res.data.cover.images.map(item => ({ url: item })));
  };
  useEffect(() => {
    // 优化，当没有id的时候，表示是发布文章界面，不需要发送请求回显数据
    if (!id) {
      return;
    }
    loadDataById(id);
  }, []);

  const draftRef = useRef(false);
  const history = useHistory();
  // console.log(' history ----->  ', history);
  // 搜集表单的数据index
  const handerFinish = async value => {
    console.log('发布文章', value);
    // 转化一下数据，将其转化为传递给后台的数据格式
    //编辑功能，修复数据格式问题，url可能从服务器端回填，也有可能是上传的
    const urlList = filelist.map(item => {
      return filelist.map(item => item.url) || item.response.data.url;
    });
    // 将images和type组成一个cover
    const cover = {
      type,
      images: urlList
    };
    const formData = {
      ...value,
      cover
    };
    // 删除无用的部分
    delete formData.type;
    delete formData.images;
    console.log('formdata  ----->  ', formData);
    // 需要判断，是编辑还是发布文章
    if (id) {
      await editArticleByIdAPI({ ...formData, id }, draftRef.current);
      //  提示用户
      message.success('编辑文章成功');
      //  跳转页面
      history.push('/list');
      return;
    }
    // 发起请求
    await pubishArticleAPI(formData, draftRef.current);
    //  提示用户
    message.success('添加文章成功');
    //  跳转页面
    history.push('/list');
  };

  // 图片上传 start
  const [imgurl, setImgurl] = useState('');
  //   保存上传文件后的文件信息
  const [filelist, setFilelist] = useState([]);
  const props = {
    //   自定义用户上传图片的文件选取弹窗，该显示哪些文件类型
    accept: ['.jpeg,.jpg,.png'],
    //   保存上传文件的键名
    name: 'image',
    // 上传文件的服务器
    action: baseURL + '/v1_0/upload',
    headers: {
      authorization: `Bearer ${getToken()}`
    },
    onChange(info) {
      // 将上柴你的文件全部保存到filelist数组中
      setFilelist(info.fileList);
      //   上传文件后的回调函数
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传文件成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传文件失败`);
      }
    },
    // 设置上传成功的回调函数
    onPreview: file => {
      console.log(33, file);
      setImgurl(file.thumbUrl);
    },
    // 上传之前的回调函数
    beforeUpload(file) {
      console.log('上传之前的回调file  ----->  ', file);
      if (!whiteListUrl.includes(file.type)) {
        //   提示用户
        message.warning('不能上传该类型的文件');
        // 两种方式阻止上传文件
        // 1，return false  不推荐使用 图片/文件会显示在页面上，但是没有上传成功
        // 2， Upload.LIST_IGNORE  ，推荐使用，图片/文件不会会显示在页面上，但是没有上传成功
        return Upload.LIST_IGNORE;
      }
    }
  };
  const [type, setType] = useState(1);
  const handerOnValuesChange = (changedValues, allValues) => {
    // console.log(' changedValues ----->  ', changedValues);
    if (changedValues.type !== undefined) {
      console.log('123123456  ----->  ', 123123456);
      setType(changedValues.type);
      // 如果filelist.length > changedValues.type时，需要删除一些数据
      // setState时异步的，不能让同步代码直接使用type去比较
      if (filelist.length > changedValues.type) {
        const newList = filelist.slice(0, changedValues.type);
        setFilelist(newList);
      }
    }
    // console.log(' allValues ----->  ', allValues);
  };
  // 图片上传end
  return (
    <div className={styles.publish}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>{id ? '编辑' : '发布'}文章</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        {/* 表单部分 */}
        {/* 绑定ref获取表单实例 */}
        <Form ref={refForm} onFinish={handerFinish} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} initialValues={{ content: '' }} onValuesChange={handerOnValuesChange}>
          <Form.Item label="标题" name="title" rules={[{ required: true, message: '标题请不要输入为空' }]}>
            <Input />
          </Form.Item>

          <Form.Item label="频道" name="channel_id" initialValue={0} rules={[{ required: true, message: '请选择频道' }]}>
            <Channel></Channel>
          </Form.Item>
          <Form.Item
            label="内容"
            name="content"
            rules={[
              { required: true, message: '内容部分不能为空' },
              {
                // 自定义校验规则
                validator: (_, value) => {
                  // 💥内容为空时，编辑器自带了一些空标签
                  if (value === '<p><br></p>') {
                    return Promise.reject(new Error('内容不能为空'));
                  }

                  return Promise.resolve();
                }
              }
            ]}
          >
            <ReactQuill theme="snow" placeholder="请输入文章内容..."></ReactQuill>
          </Form.Item>
          {/* 修改name属性为type */}
          <Form.Item label="封面" name="type" initialValue={1}>
            {/* 使用Radio组件 */}
            <Radio.Group>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>
          {/* 图片上传 */}
          <Form.Item
            wrapperCol={{
              // offset代表的是从左向右的偏移量
              offset: 4
            }}
            name="images"
          >
            <Upload
              {...props} // 1.调整上传文件列表的显示类型，card类型
              listType="picture-card"
              fileList={filelist}
            >
              {filelist.length < type && <Button icon={<UploadOutlined />} />}
            </Upload>
          </Form.Item>
          <Form.Item
            wrapperCol={{
              // offset代表的是从左向右的偏移量
              offset: 4
            }}
          >
            <Space>
              <Button type="primary" htmlType="submit">
                {id ? '编辑' : '发布'}文章
              </Button>
              <Button
                type="primary"
                htmlType="submit"
                onClick={() => {
                  draftRef.current = true;
                }}
              >
                存为草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
      {/* 模态框 */}
      <Modal
        visible={!!imgurl}
        footer={null}
        style={{ width: 470, textAlign: 'center' }}
        onCancel={() => {
          setImgurl('');
        }}
      >
        <img src={imgurl} alt="" />
      </Modal>
    </div>
  );
}
